<!doctype html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Language" content="en" />
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#4188c9">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  <title>更改密码</title>
  <script src="./assets/js/require.min.js"></script>
  <script src="./assets/js/owner_work.js"></script>
  <link href="./assets/css/dashboard.css" rel="stylesheet" />
  <script src="./assets/js/dashboard.js"></script>
</head>

<body class="">
  <div class="" role="alert" id="alert_tip">
    <i class="" aria-hidden="true"></i> <span>  </span>
  </div>
  <div class="page">
    <div class="page-single">
      <div class="container">
        <div class="row">
          <div class="col col-login mx-auto">
            <div class="text-center mb-6">
              <h2 class="mt-0 mb-4">Owner-work</h2>
            </div>
            <div class="dimmer " id="dimmer_body">
              <div class="loader"></div>
              <form class="card dimmer-content">
                <div class="card-body p-6">
                  <div class="card-title">更改密码</div>
                  <p class="text-muted">请输入旧密码、新密码。</p>
                  <div class="form-group">
                    <label class="form-label">旧密码 </label>
                    <input type="password" class="form-control" id="oldPassword" placeholder=" ">
                  </div>
                  <div class="form-group">
                    <label class="form-label">新密码 </label>
                    <input type="password" class="form-control" id="Password1" placeholder=" ">
                  </div>
                  <div class="form-group">
                    <label class="form-label">再次输入新密码 </label>
                    <input type="password" class="form-control" id="Password2" placeholder=" ">
                  </div>
                  <div class="form-footer">
                    <button type="button" class="btn btn-primary btn-block" onclick="changePassword()">确认</button>
                  </div>
                </div>
              </form>
            </div>
            <div class="text-center text-muted">
              <a href="javascript:history.back()" class="btn btn-success"><i class="fe fe-arrow-left mr-2"></i> 返回</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  function changePassword(){
    let inputOldPassword = $("#oldPassword").val()
    let inputPassword1 = $("#Password1").val()
    let inputPassword2 = $("#Password2").val()

    if (inputOldPassword=="" || inputPassword1=="" || inputPassword2==""){
      showAlert("fe-alert-triangle", `输入不能为空！`, "alert-danger")
      return false
    }
    if (inputPassword1 != inputPassword2){
      showAlert("fe-alert-triangle", `密码不一致！`, "alert-danger")
      return false
    }

    $("#dimmer_body").addClass("active")
    $.ajax(localStorage.BaseUrl + "/user/update_password", {
      contentType: "application/json",
      dataType: "json",
      method: "PUT",
      headers:{
        Authorization: localStorage.Token
      },
      data: JSON.stringify({
        old_password: inputOldPassword,
        password_1: inputPassword1,
        password_2: inputPassword2
      })
    }).done(function(data){
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1){
        showAlert("fe-check", data["msg"], "alert-success")
        // 密码更改成功要重新登录
        localStorage.clear()
        setTimeout(() => {
          location.href = "./login.html"
        }, 2000);
      }else{
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      console.log(xhr)
      showAlert("fe-alert-triangle", `服务器错误`, "alert-danger")
    }).always(()=>{
      $("#dimmer_body").removeClass("active")
    })
  }
</script>

</html>